<template>
  <BorderBox
    :title="title"
    :headerBottom="false"
    :wrapperStyle="{
      width: 'calc((100% - 32px) / 3)',
      height: '170px',
      marginTop: '16px',
    }"
    :styleText="{ height: '75%' }"
  >
    <template #title_r><span class="total">共888</span></template>
    <template #main_info>
      <Charts id="vmCpuChartId" :options="barOption" width="100%" height="100%" />
    </template>
  </BorderBox>
</template>

<script setup>
import { ref } from "vue";
import Charts from "@/components/Charts/index.vue";
import useChartOption from "@/hooks/chart-option";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  chartsData: {
    type: Array,
    default: [
      { value: "系统预留", label: 11 },
      { value: "已使用", label: 22 },
      { value: "剩余", label: 33 },
    ],
  },
});
const { barOption } = useChartOption(() => {
  const barBorderRadius = {
    0: [16, 0, 0, 16],
    1: [0],
    2: [0, 16, 16, 0],
  };
  const series = props.chartsData?.map((item, idx) => ({
    name: item.value,
    type: "bar",
    stack: "total",
    data: [item.label],
    barWidth: "16px",
    itemStyle: {
      normal: {
        barBorderRadius: barBorderRadius[idx],
      },
    },
  }));
  return {
    grid: {
      left: "4%",
      right: 0,
      top: 0,
    },
    legend: {
      selectedMode: false,
      itemHeight: 8,
      itemWidth: 8,
      left: "3%",
      y: "center",
      itemGap: 32,
      textStyle: {
        fontSize: 12,
        color: "#2C406899",
      },
      formatter: function (name) {
        const seriesData = props.chartsData.filter((item) => item.value === name);
        const sum = seriesData.reduce((acc, val) => acc + val.label, 0);
        return `${name} ${sum}`;
      },
    },
    color: ["#FF8F0D", "#0F5EF7", "#0F5EF733"],
    xAxis: {
      type: "value",
      boundaryGap: false,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisPointer: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    tooltip: {
      show: false,
      // trigger: "axis",
      // padding: 0,
      // formatter(params) {
      //   const [firstElement] = params;
      //   return `<div style="padding:2px 4px"; font-size="8px">${Number(
      //     firstElement.value
      //   )}</div>`;
      // },
    },
    series,
    // series: [
    //   {
    //     name: "Mon",
    //     type: "bar",
    //     stack: "total",
    //     data: [11],
    //     barWidth: "16px",
    //     showBackground: false,
    //     itemStyle: {
    //       normal: {
    //         barBorderRadius: [16, 0, 0, 16],
    //       },
    //     },
    //     backgroundStyle: {
    //       color: "#E9EBF299",
    //       borderRadius: [5],
    //     },
    //   },
    //   {
    //     name: "Tue",
    //     type: "bar",
    //     stack: "total",
    //     data: [11],
    //     barWidth: "16px",
    //   },
    // {
    //   name: "Wed",
    //   type: "bar",
    //   stack: "total",
    //   data: [33],
    //   barWidth: "16px",
    //   itemStyle: {
    //     normal: {
    //       barBorderRadius: [0, 16, 16, 0],
    //     },
    //   },
    // },
    // ],
  };
});
</script>

<style lang="scss" scoped>
.total {
  color: #2c406899;
  font-size: 12px;
}
// .main_info_l {
//   font-size: 18px;
//   width: 160px;
//   flex-direction: column;
//   align-items: self-start;
//   .used {
//     font-size: 12px;
//     color: #2c406899;
//     padding-top: 6px;
//   }
// }
// .main_info_r {
//   width: 100%;
//   // border: 1px solid #000;
// }
</style>
